
function AnimacionMar() {
	this.contexto = document.getElementById("canvasBoc").getContext("2d");
	// this.posX = 0;
	this.translacion=0;
	var that = this;
	this.progresa = function() {
		var paso = 40;
		var posY = 374;
		this.contexto.save();
		this.contexto.clearRect(0,0,800,400);
		this.contexto.fillStyle = "blue";
		this.translacion = (this.translacion - 1)%paso;
		this.contexto.globalAlpha = .7;
		this.contexto.translate(this.translacion, 0);
		this.contexto.beginPath();
		this.contexto.moveTo(380, posY);
		var posX = 380;
		while (posX < 800 + 2 * paso) {
			this.contexto.bezierCurveTo(posX + paso/3, posY+15, posX + 2*paso/3, posY - 15, posX+paso, posY);
			posX = posX + paso;
		}
		this.contexto.lineTo(800 + 2 * paso, 400);
		this.contexto.lineTo(380, 400);
		this.contexto.closePath();
		this.contexto.fill();
		this.contexto.fillStyle = "black";
		this.contexto.stroke();
		
		
		
		
		
		/* this.contexto.globalAlpha = .6;		
		this.posX = (this.posX + 10- 1)%(this.radio*4);
		this.contexto.translate(this.posX , 0);
		this.contexto.beginPath();
		this.contexto.moveTo(0, 200);
		var posX = 0;
		var anticlockwise = true;
		while (posX < 840) {
			anticlockwise = !anticlockwise;
			this.contexto.arc(posX, 200, this.radio, (Math.PI/180)*180, (Math.PI/180)*0, anticlockwise);
			posX = posX + this.radio * 2;
		}			
		this.contexto.lineTo(840, 400);		
		this.contexto.lineTo(0,400);
		this.contexto.closePath();
		//this.contexto.lineTo(0,200);
		this.contexto.fill();
		this.contexto.restore();
		//this.contexto.stroke();		
		//
		*/
		this.contexto.restore();
		setTimeout(function(){that.progresa()}, 33);
	}	
}

window.onload = function() {
	new AnimacionMar().progresa();
}
